<template>
  <div class="wrapper">
    <div
      :background-color="state.color1"
      class="left-wrapper"
      :style="{ width: state.iscollapse ? '64px' : '210px' }"
    >
      <div class="imger">
        <img
          src="https://m.imooc.com/static/wap/static/common/img/logo-small@2x.png"
          alt=""
        />
        <h1>imooc-admin</h1>
      </div>
      <!-- 左侧菜单 -->
      <el-menu
        :background-color="state.color1"
        default-active="2"
        class="el-menu-vertical-demo"
        :unique-opened="true"
        text-color="white"
        router
        :collapse="state.iscollapse"
      >
        <template v-for="tag in state.MenusList">
          <el-menu-item
            :key="tag.id"
            v-if="!tag.children"
            :index="tag.path"
            @click="gettags(tag)"
          >
            <el-icon><User /></el-icon>
            <span>{{ tag.title }}</span>
          </el-menu-item></template
        >
        <template v-for="tag in state.MenusList">
          <el-sub-menu :key="tag.id" v-if="tag.children" :index="tag.id + ''">
            <template #title>
              <el-icon><DocumentCopy /></el-icon>
              <span>{{ tag.title }}</span>
            </template>
            <el-menu-item
              v-for="it in tag.children"
              :key="it.id"
              @click="gettags(it)"
              :index="it.path"
            >
              <el-icon><User /></el-icon>{{ it.title }}</el-menu-item
            >
          </el-sub-menu></template
        >
      </el-menu>
    </div>

    <div class="right-wrapper">
      <div class="header-wrapper">
        <!-- top -->
        <div class="head">
          <div class="head-left">
            <el-icon style="vertical-align: middle" :size="28">
              <Fold @click="state.iscollapse = !state.iscollapse" />
            </el-icon>
            <el-breadcrumb separator="/">
              <el-breadcrumb-item
                :to="{ path: '/' }"
                v-for="item in $store.state.tags"
                :key="item.id"
                v-show="state.tagshow == item.id"
                >{{ item.title }}</el-breadcrumb-item
              >
            </el-breadcrumb>
          </div>
          <div class="head-right">
            <!-- 引导 -->
            <el-icon style="vertical-align: middle" :size="25">
              <WindPower />
            </el-icon>
            <!-- 全屏 -->
            <el-icon
              style="vertical-align: middle"
              :size="25"
              @click="toggleFullscreen"
            >
              <FullScreen />
            </el-icon>
            <!-- 搜索 -->
            <el-icon style="vertical-align: middle" :size="25">
              <Search />
            </el-icon>
            <el-icon
              style="vertical-align: middle"
              @click="state.col = true"
              :size="25"
            >
              <Star />
            </el-icon>
            <!-- 换肤 -->
            <el-dialog v-model="state.col" width="200px" title="提示">
              <div class="block">
                <el-color-picker
                  @change="state.col = false"
                  v-model="state.color1"
                ></el-color-picker>
              </div>
            </el-dialog>
            <el-icon style="vertical-align: middle" :size="25">
              <TakeawayBox />
            </el-icon>
            <el-dropdown>
              <img
                src="https://m.imooc.com/static/wap/static/common/img/logo-small@2x.png"
                alt=""
              />
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>首页</el-dropdown-item>
                  <el-dropdown-item>
                    <a href="https://coding.imooc.com/class/542.html"
                      >课程主页</a
                    >
                  </el-dropdown-item>
                  <el-dropdown-item divided @click="cleanLogin"
                    >退出登录</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
        <div class="head-footer">
          <router-link
            v-for="(item, index) in $store.state.tags"
            :key="item.id"
            :to="{ path: item.path }"
          >
            <!-- contextmenu 右击事件 -->
            <div
              @contextmenu.prevent="contextMenu(index)"
              :class="state.tagshow == item.id ? 'active' : 'tags'"
              @click="state.tagshow = item.id"
            >
              <el-icon
                style="vertical-align: middle"
                :size="15"
                v-if="state.tagshow == item.id"
              >
                <CircleCheckFilled />
              </el-icon>
              {{ item.title }}
              <el-icon
                style="vertical-align: middle"
                :size="15"
                v-if="state.tagshow != item.id"
                @click="delTags(index)"
              >
                <CircleClose />
              </el-icon>
            </div>
            <ul v-if="state.ulshow == index" class="contextMenu">
              <li @click="$router.go(0)">刷新</li>
              <li @click="delright(index)">关闭右侧</li>
              <li @click="delall(index)">关闭其他</li>
            </ul></router-link
          >
        </div>
      </div>
      <div class="card">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, toRefs, reactive, onMounted } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { getMenus } from "@/http/login.js";
import screenfull from "screenfull"; //全屏
//全屏
function toggleFullscreen() {
  if (screenfull.isEnabled) {
    screenfull.toggle();
  }
}
const store = useStore();

const state = reactive({
  col: false,
  ulshow: -1,
  visible: false,
  color1: "#3b455c",
  /**
   * 左侧菜单数据
   */
  MenusList: [
    {
      id: 130,
      title: "个人中心",
      path: "/user",
      icon: "User",
    },
    {
      id: 140,
      title: "数据可视化",
      path: "/chart",
      icon: "Histogram",
    },
    {
      id: 110,
      title: "用户",
      icon: "User",
      children: [
        {
          id: 104,
          title: "员工管理",
          path: "/user/manage",
          icon: "User",
        },
        {
          id: 105,
          title: "角色列表",
          path: "/user/role",
          icon: "User",
        },
        {
          id: 106,
          title: "权限列表",
          path: "/user/permission",
          icon: "User",
        },
      ],
    },
    {
      id: 120,
      title: "文章",
      icon: "DocumentCopy",
      children: [
        {
          id: 117,
          title: "文章排名",
          path: "/article/ranking",
          icon: "User",
        },
        {
          id: 116,
          title: "创建文章",
          path: "/article/create",
          icon: "User",
        },
      ],
    },
  ],
  tagshow: -1,
  iscollapse: false, //左侧菜单收缩
  headtags: [], //头部标签
});
let contextMenu = (i) => {
  console.log(i, "i");
  state.ulshow = i;
};
/**
 * 关闭
 */
window.addEventListener("click", closeUl);
function closeUl() {
  state.ulshow = -1;
}
/**
 * 删除其他
 */
let delall = (index) => {
  store.commit("removeTagsView", {
    type: "other",
    index: index,
  });
};
/**
 * 删除右侧
 */
let delright = (index) => {
  store.commit("removeTagsView", {
    type: "right",
    index: index,
  });
};
/**
 * 头部 tags
 */
let gettags = (item) => {
  console.log(item, store.state.tags, "ind");
  store.commit("addTags", item);
  const ind = store.state.tags.find((it) => {
    return it.id == item.id;
  });
  console.log(ind, "int");
  state.tagshow = ind.id;
};
/**
 * 删除头部
 */
let delTags = (index) => {
  // console.log(item, ";;");
  store.commit("removeTagsView", {
    type: "index",
    index: index,
  });
};

/**
 * 获取左侧菜单
 */
let getMenusList = async () => {
  const res = await getMenus();
  // console.log(res, "菜单数据");
};
/**
 * 退出登录
 */
let cleanLogin = () => {
  store.dispatch("cleantoken");
};
onMounted(() => {
  getMenusList();
});
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
  a {
    text-decoration: none;
    color: black;
  }
}
.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  .left-wrapper {
    max-height: 100%;
    background: #3b455c;
    overflow: auto;
    display: flex;
    flex-direction: column;
    .imger {
      padding: 10px;
      display: flex;
      overflow: hidden;
      img {
        height: 44px;
        width: 44px;
      }
      h1 {
        margin-left: 10px;
        color: #fff;
        font-weight: 600;
        line-height: 50px;
        font-size: 16px;
      }
    }
  }
  .right-wrapper {
    flex: 1;
    max-height: 100%;
    overflow: hidden;
    // background: green;
    display: flex;
    flex-direction: column;
    .header-wrapper {
      width: 100%;
      padding: 10px 20px 5px 22px;
      background: #fafbfc;
      flex-shrink: 1;
      border-bottom: 1px solid #d8dce5;
      box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      .head {
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgb(191, 187, 187, 0.5);
        .head-left {
          display: flex;
          align-items: center;
          .el-breadcrumb {
            margin-left: 20px;
          }
        }
        .head-right {
          display: flex;
          align-items: center;
          .el-icon {
            margin-right: 10px;
          }
          img {
            width: 44px;
            height: 44px;
          }
        }
      }
      .head-footer {
        .contextMenu {
          position: absolute;
          list-style: none;
          z-index: 999;
          li {
            width: 100px;
            border: 1px solid rgb(211, 209, 209, 0.5);
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #f2f4f6;
            font-size: 11px !important;
            &:hover {
              background: rgb(171, 168, 167);
            }
          }
        }
        height: 35px;
        display: flex;
        align-items: flex-end;
        .tags {
          width: 100px;
          height: 30px;
          margin-right: 5px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid rgb(166, 164, 164, 0.5);
          font-size: 14px !important;
        }
        .active {
          color: white;
          background: #3b455c;
          font-size: 14px !important;
          width: 100px;
          height: 30px;
          margin-right: 5px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid rgb(166, 164, 164, 0.5);
        }
      }
    }
    .card {
      flex: 1;
      max-height: 100%;
      overflow: auto;
      width: 100%;
      margin-top: 10px;
      padding: 20px;
      // background: gold;
    }
  }
}
</style>